<style lang="scss" scoped>
.set-width {
    width: 400px;
}

.icon-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;
    margin-top: 10px;
    overflow-y: auto;

    .icon-item {
        display: flex;
        flex-direction: column;
        place-items: center center;
        width: 10%;
        padding: 5px;
        margin: 0 10px 10px 0;
        cursor: pointer;
        border: 1px solid #ccc;

        &:hover {
            color: #409eff;
            border-color: #409eff;
            transition: all 0.2s;
            transform: scaleX(1.1);
        }
    }
}
</style>

<template>
    <div class="container">
        <el-popover v-model="visible" placement="bottom-start" trigger="click" width="400">
            <div class="set-width" slot="reference">
                <el-input v-bind="$attrs" :value="value">
                    <template #prepend>
                        <svg-icon :icon-class="value || ''" />
                    </template>
                </el-input>
            </div>
            <el-input v-model="search" placeholder="搜索图标"></el-input>
            <el-divider></el-divider>
            <ul class="icon-list">
                <li class="icon-item" v-for="item in icons" :key="item">
                    <el-tooltip effect="dark" :content="item" placement="bottom">
                        <svg-icon :icon-class="item" @click="handleSelectIcon(item)" />
                    </el-tooltip>
                </li>
            </ul>
        </el-popover>
    </div>
</template>

<script>
export default {
    name: 'IconSelect',
    props: ['value'],
    data() {
        return {
            allIcons: [],
            icons: [],
            inputValue: '',
            visible: false,
            search: ''
        }
    },
    created() {
        this.getIcons()
    },
    watch: {
        allIcons() {
            this.icons = this.allIcons
        },
        search(value) {
            if (value) {
                this.icons = this.allIcons.filter((iconName) => iconName.includes(value))
            } else {
                this.icons = this.allIcons
            }
        }
    },
    methods: {
        clearfdas() {
            console.log(4578)
        },
        handleSelectIcon(icon) {
            this.$emit('input', icon)
            this.visible = false
        },
        getIcons() {
            const files = require.context("@/icons/svg", true, /\.svg$/).keys()
            this.allIcons = files.map((item) => {
                item = item.split('.')[1].split('/')[1]
                return item
            })
        }
    }
}
</script>
